<extend name="Public:comment" />

<block name="title">商品详情页</block>

<block name="css">
	<link rel="stylesheet" href="/Application/Home/Common/css/base.css" type="text/css" />
	<link rel="stylesheet" href="/Application/Home/Common/css/shop_common.css" type="text/css" />
	<link rel="stylesheet" href="/Application/Home/Common/css/shop_header.css" type="text/css" />
	<link rel="stylesheet" href="/Application/Home/Common/css/shop_list.css" type="text/css" />
    <link rel="stylesheet" href="/Application/Home/Common/css/shop_goods.css" type="text/css" />
</block>

<block name="js">
	<script src="/Application/Home/Common/js/jquery.js" ></script>
    <script src="/Application/Home/Common/js/topNav.js" ></script>
    <script src="/Application/Home/Common/js/shop_goods.js" ></script>
    <script src="/Application/Home/Common/js/jquery-2.0.3.min.js" ></script>
    <!-- <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> -->
    <script type=text/javascript>
		$(function(){			
			$("#spec-list img").bind("mouseover",function(){
				var src=$(this).attr("src");
				$("#spec-n1 img").eq(0).attr({
					src:src.replace("\/n5\/","\/n1\/"),
					jqimg:src.replace("\/n5\/","\/n0\/")
				});
				$(this).css({
					"border":"2px solid #ff6600",
					"padding":"1px"
				});
			}).bind("mouseout",function(){
				$(this).css({
					"border":"1px solid #ccc",
					"padding":"2px"
				});
			});

			$("#good_num_jian").click(function(){
				val--;
				var val = $("#good_nums").val();
				var price = $("#price").html();
				if(val == 0){
					val=1
				}
				var cost = val*price;
				$("#good_nums").val(val);
				$("#good_count").empty();
				$("#good_count").append(cost);
			});

			$("#good_num_jia").click(function(){
				val++;
				var price = $("#price").html();
				var val = $("#good_nums").val();
				var count = {$count};
				if(val > count){
					val--;
				}
				var cost = val*price;
				$("#good_count").empty();
				$("#good_count").append(cost);
				$("#good_nums").val(val);
			});

			$("#size").change(function(){
				var size = $("#size").val();
				var num = $("#good_nums").val();
				$.ajax({
				   type: "POST",
				   url: "{:U('goods_size')}",
				   data: {id:size},
				   success: function(msg){
				   		if(msg.status == 1){
				   			var pics = msg.data.pic;
				   			var pic = new Array();
				   			pic = pics.split(",");
							$("#price").text(msg.data.cost);
							var price = $("#price").html();
							var cost = price*num;
							$("#good_count").empty();
							$("#good_count").append(cost);
							$("#count").html('当前库存'+msg.data.count+'件');
							var str = '';
							for(var i=0;i<pic.length;i++){
								var src = ('/Uploads/'+pic[i]);
								str += "<li><img src='"+src+"'></li>";
							}
							$(".imgList").empty();
							$(".imgList").html(str);
							console.log(str);
				   		}
				   }
				});
			});

			$("#flow_add").click(function(){
				var pid = $("#size").val();
				var cost = $("#price").text();
				var num = $("#good_nums").val();
				var pic = "{$pic[0][0]}";
				var uid = {$Think.session.id};
				$.ajax({
				   type: "POST",
				   url: "{:U('flow_add')}",
				   data: {pid:pid,cost:cost,num:num,pic:pic,uid:uid},
				   success: function(msg){
				     alert(msg.info);
				   }
				});
			});
		});
	</script>
</block>

<block name="shouye">
<div id="shop_hd_menu_all_category" class="shop_hd_menu_all_category"><!-- 首页去掉 id="shop_hd_menu_all_category" 加上clsss shop_hd_menu_hover -->
</block>

<block name="content">
<!-- 面包屑 注意首页没有 -->
	<div class="shop_hd_breadcrumb">
		<strong>当前位置：</strong>
		<span>
			<a href="">首页</a>&nbsp;›&nbsp;
			<foreach name="cate" item="i">
				<a href="">{$i.title}</a>&nbsp;›&nbsp;
			</foreach>
		</span>
	</div>
	<div class="clear"></div>
	<!-- 面包屑 End -->

	<!-- Header End -->
	
	<!-- Goods Body -->
	<div class="shop_goods_bd clear">

		<!-- 商品展示 -->
		<div class="shop_goods_show">
			<div class="shop_goods_show_left">
				<!-- 京东商品展示 -->
				<link rel="stylesheet" href="/Application/Home/Common/css/shop_goodPic.css" type="text/css" />
				<script typ/Application/Home/Common/js/shop_goodPic_base.js"></script>
				<script typ/Application/Home/Common/js/lib.js"></script>
				<script typ/Application/Home/Common/js/163css.js"></script>
				<div id="preview">
					<div class=jqzoom id="spec-n1" onClick="window.open('/')"><IMG height="350" src="/Uploads/{$pic[0][0]}" width="350">
						</div>
						<div id="spec-n5">
							<div class=control id="spec-left">
								<img src="/Application/Home/Common/images/left.gif" />
							</div>
							<div id="spec-list">
								<ul class="list-h imgList">
									<foreach name="pic[0]" item="v">
										<li><img src="/Uploads/{$v}"></li>
									</foreach>
								</ul>
							</div>
							<div class=control id="spec-right">
								<img src="/Application/Home/Common/images/right.gif" />
							</div>
							
					    </div>
					</div>

					
					<!-- 京东商品展示 End -->

			</div>
			<div class="shop_goods_show_right">
				<ul>
					<li>
						<strong style="font-size:14px; font-weight:bold;">{$goods.content}</strong>
					</li>
					<li>
						<label>价格：</label>
						<span><strong id="price">{$goods.cost}</strong>元</span>
					</li>
					<li>
						<label>请选择商品分类：</label>
						<select id="size">
								<option value="">请选择</option>
							<foreach name="res" item="v">
								<option value="{$v['id']}">{$v.color}{$v.size}</option>
							</foreach>
						</select>
						
					</li>
					<li class="goods_num">
						<label>购买数量：</label>
						<span>
						<a class="good_num_jian" id="good_num_jian" href="javascript:void(0);"></a>
						<input type="text" value="1" id="good_nums" class="good_nums" style="width:40px;"/>
						<a href="javascript:void(0);" id="good_num_jia" class="good_num_jia"></a>
						<span id="count">(当前库存{$count}件)</span>
						</span>
					</li>
                    <li class="goods_num">
						<label>商品总价：</label>
						&yen;<span id="good_count">{$goods.cost}</span>
					</li>
					<li style="padding:20px 0;">
						<label>&nbsp;</label>
						<span><a href="#" class="goods_sub goods_sub_gou" id="flow_add">加入购物车</a></span>
					</li>
				</ul>
			</div>
		</div>
		<!-- 商品展示 End -->

		<div class="clear mt15"></div>
		<!-- Goods Left -->
		<div class="shop_bd_list_left clearfix">
			<!-- 左边商品分类 -->
			<div class="shop_bd_list_bk clearfix">
				<div class="title">商品分类</div>
				<div class="contents clearfix">
					<dl class="shop_bd_list_type_links clearfix">
						<dt><strong>女装</strong></dt>
						<dd>
							<span><a href="">风衣</a></span>
							<span><a href="">长袖连衣裙</a></span>
							<span><a href="">毛呢连衣裙</a></span>
							<span><a href="">半身裙</a></span>
							<span><a href="">小脚裤</a></span>
							<span><a href="">加绒打底裤</a></span>
							<span><a href="">牛仔裤</a></span>
							<span><a href="">打底衫</a></span>
							<span><a href="">情侣装</a></span>
							<span><a href="">棉衣</a></span>
							<span><a href="">毛呢大衣</a></span>
							<span><a href="">毛呢短裤</a></span>
						</dd>
					</dl>
				</div>
			</div>
			<!-- 左边商品分类 End -->

			<!-- 热卖推荐商品 -->
			<div class="shop_bd_list_bk clearfix">
				<div class="title">热卖推荐商品</div>
				<div class="contents clearfix">
					<ul class="clearfix">
						
						<li class="clearfix">
							<div class="goods_name"><a href="">Gap经典弹力纯色长袖T恤|000891347|原价149元</a></div>
							<div class="goods_pic"><span class="goods_price">¥ 279.00 </span><a href=""><img src="/Application/Home/Common/images/89a6d6466b00ae32d3c826b9ec639084.jpg_small.jpg" /></a></div>
							<div class="goods_xiaoliang">
								<span class="goods_xiaoliang_link"><a href="">去看看</a></span>
								<span class="goods_xiaoliang_nums">已销售<strong>99</strong>笔</span>
							</div>
						</li>

						<li class="clearfix">
							<div class="goods_name"><a href="">Gap经典弹力纯色长袖T恤|000891347|原价149元</a></div>
							<div class="goods_pic"><span class="goods_price">¥ 279.00 </span><a href=""><img src="/Application/Home/Common/images/89a6d6466b00ae32d3c826b9ec639084.jpg_small.jpg" /></a></div>
							<div class="goods_xiaoliang">
								<span class="goods_xiaoliang_link"><a href="">去看看</a></span>
								<span class="goods_xiaoliang_nums">已销售<strong>99</strong>笔</span>
							</div>
						</li>

						<li class="clearfix">
							<div class="goods_name"><a href="">Gap经典弹力纯色长袖T恤|000891347|原价149元</a></div>
							<div class="goods_pic"><span class="goods_price">¥ 279.00 </span><a href=""><img src="/Application/Home/Common/images/89a6d6466b00ae32d3c826b9ec639084.jpg_small.jpg" /></a></div>
							<div class="goods_xiaoliang">
								<span class="goods_xiaoliang_link"><a href="">去看看</a></span>
								<span class="goods_xiaoliang_nums">已销售<strong>99</strong>笔</span>
							</div>
						</li>

					</ul>
				</div>
			</div>
			<!-- 热卖推荐商品 -->
			<div class="clear"></div>

			<!-- 浏览过的商品 -->
			
			<!-- 浏览过的商品 -->

		</div>
		<!-- Goods Left End -->

		<!-- 商品详情 -->
		<script type="text/javascript" src="/Application/Home/Common/js/shop_goods_tab.js"></script>
		<div class="shop_goods_bd_xiangqing clearfix">
			<div class="shop_goods_bd_xiangqing_tab">
				<ul>
					<li id="xiangqing_tab_1" onmouseover="shop_goods_easytabs('1', '1');" onfocus="shop_goods_easytabs('1', '1');" onclick="return false;"><a href=""><span>商品详情</span></a></li>
					<li id="xiangqing_tab_2" onmouseover="shop_goods_easytabs('1', '2');" onfocus="shop_goods_easytabs('1', '2');" onclick="return false;"><a href=""><span>商品评论</span></a></li>
					<li id="xiangqing_tab_3" onmouseover="shop_goods_easytabs('1', '3');" onfocus="shop_goods_easytabs('1', '3');" onclick="return false;"><a href=""><span>商品咨询</span></a></li>
				</ul>
			</div>
			<style type="text/css">
				.comment_list{width: 100%;height: auto;clear: both;margin-bottom: 20px;float: left;border-bottom: 1px dotted #cccccc;padding-bottom: 10px;}
				.comment_list .avatar{width: 50px;height: auto;margin-right: 10px;float: left;}
				.comment_list .avatar img{width: 50px;height: 50px;overflow: hidden;}
				.comment_list .avatar span{height: 24px;line-height: 24px;display: inline-block;}
				.comment_list_content{width: 700px;height: auto;float: right;}
				.comment_list_content .comment_list_content_l{width: 500px;float: left;}
				.comment_list_content_l p.tit{width: 100%;height: 24px;line-height: 24px;}
				.comment_list_content_l p.tit span{margin-right: 10px;}
				.comment_list_content_l .star i{width: 13px;height: 13px;display: inline-block;background: url(/Application/Home/Common/images/star0.jpg);}
				.comment_list_content_l .star i.cur{background: url(/Application/Home/Common/images/star1.jpg);}
				.comment_list_content_l p.con{line-height: 150%;}
				.comment_list_content .comment_list_content_r{width: 200px;float: right;text-align: right;}
				.comment_list_content_r a{height: 24px;line-height: 24px;padding: 0 8px;display: inline-block;border: 1px solid #dfdfdf;border-radius: 3px;margin-top: 30px;color: #333333;}
				.comment_list_content_r a:hover{color: #cc0000;text-decoration: none;}
				.comment_list_content_r a i{font-style: normal;padding: 0 5px;color: #cc0000;font-weight: bold;}
			</style>
			<div class="shop_goods_bd_xiangqing_content clearfix">
				<div id="xiangqing_content_1" class="xiangqing_contents clearfix">
					<p>商品详情----11111</p>
				</div>
				<div id="xiangqing_content_2" class="xiangqing_contents clearfix">
					<!--一条评论 开始-->
					<div class="comment_list">
						<div class="avatar">
							<img src="/Application/Home/Common/images/user.gif">
							<span>zhang***</span>
						</div>
						<div class="comment_list_content">
							<div class="comment_list_content_l">
								<p class="tit">
									<span class="time">2015-07-24</span>
									<span class="star">
										<i class="cur"></i>
										<i></i>
										<i></i>
										<i></i>
										<i></i>
									</span>
								</p>
								<p class="con">
									裤子很漂亮，质量也很好，穿着很合身，性价比很高的意见宝贝。值得购买，发货速度很快
									裤子很漂亮，质量也很好，穿着很合身，性价比很高的意见宝贝。值得购买，发货速度很快
									裤子很漂亮，质量也很好，穿着很合身，性价比很高的意见宝贝。值得购买，发货速度很快
									裤子很漂亮，质量也很好，穿着很合身，性价比很高的意见宝贝。值得购买，发货速度很快
								</p>
							</div>
							<div class="comment_list_content_r">
								<a href="javascript:">有用 (<i>1</i>)</a>
								<a href="javascript:">没用 (<i>2</i>)</a>
							</div>
						</div>
					</div>
					<!--一条评论 结束-->
					
							<!--一条评论 开始-->
					<div class="comment_list">
						<div class="avatar">
							<img src="/Application/Home/Common/images/user.gif">
							<span>zhang***</span>
						</div>
						<div class="comment_list_content">
							<div class="comment_list_content_l">
								<p class="tit">
									<span class="time">2015-07-24</span>
									<span class="star">
										<i class="cur"></i>
										<i></i>
										<i></i>
										<i></i>
										<i></i>
									</span>
								</p>
								<p class="con">
									裤子很漂亮，质量也很好，穿着很合身，性价比很高的意见宝贝。值得购买，发货速度很快
									裤子很漂亮，质量也很好，穿着很合身，性价比很高的意见宝贝。值得购买，发货速度很快
									裤子很漂亮，质量也很好，穿着很合身，性价比很高的意见宝贝。值得购买，发货速度很快
									裤子很漂亮，质量也很好，穿着很合身，性价比很高的意见宝贝。值得购买，发货速度很快
								</p>
							</div>
							<div class="comment_list_content_r">
								<a href="javascript:">有用 (<i>1</i>)</a>
								<a href="javascript:">没用 (<i>2</i>)</a>
							</div>
						</div>
					</div>
					<!--一条评论 结束-->

					
				</div>

				<div id="xiangqing_content_3" class="xiangqing_contents clearfix">
					<p>商品自诩---3333</p>
				</div>
			</div>
		</div>
		<!-- 商品详情 End -->

	</div>
	<!-- Goods Body End -->
</block>